<template>
 <div>
  <ul>
    <!-- 目标:有key,值为id,先产生新旧虚拟dom,根据key比较 -->
    <!-- 如果不设置key  v-for会采用就地更新策略 ,尽可能复用当前的-->
    <!-- 将key设置为索引与不设置效果一样 -->
    <!-- <li v-for="(item,index) in list">{{item}} -->
      <li v-for="(item) in list" :key="item.id">{{item.name}}
      <input type="text">
    </li>
  </ul>
  <button @click="add">点我添加一个新来的</button>
 </div>
</template>
<script>
export default {
 data() {
 return {
  // list:['老大','老二','老三']
  list:[
    {
      id:50,
      name:'老大'
    },
     {
      id:23,
      name:'老二'
    },
     {
      id:34,
      name:'老三'
    }
  ]
  
 }
 },
 methods:{
  add(){
  this.list.splice(1,0,{id:8,name:'新来的'})
  }
  
   
  }
 }

</script>
<style lang="less" scoped>

</style>
